﻿<div class="ui-widget-content">
    <h3>Selectable</h3>
    <p>
        O selectable transforma elementos HTML (normalmente &lt;ol&gt; ou &lt;ul&gt;) em objetos selecionáveis.
        Você pode utilizar a tecla CTRL para selecionar vários objetos de forma aleatória.
        Eis como fazer isso:
    </p>

    <div id="tab_selectable">
        <ul>
            <li><a href="#selectable_simples">Normal</a></li>
            <li><a href="#selectable_grid">Em formato de grade</a></li>
            <li><a href="#selectable_conexao">Com conexão entre conjuntos</a></li>
        </ul>

        <div id="selectable_simples">
            Isto daqui é apenas uma &lt;ol&gt; com um monte de &lt;li&gt;'s dentro.
            O código é <code>$("#meu_selectable").selectable();</code>
            <ol id="selectable_exemplo" style="list-style-type: none;">
                <li class="ui-widget-content">Item 1</li>
                <li class="ui-widget-content">Item 2</li>
                <li class="ui-widget-content">Item 3</li>
                <li class="ui-widget-content">Item 4</li>
                <li class="ui-widget-content">Item 5</li>
            </ol>
        </div>

        <div id="selectable_grid">
            Isto daqui é apenas uma &lt;ol&gt; com um monte de &lt;li&gt;'s dentro. Cada &lt;li&gt; tem um style="float: left".
            O código é <code>$("#meu_selectable").selectable();</code>
            <ol id="selectable_exemplo_float" style="list-style-type: none;">
                <li class="ui-widget-content">Item 1</li>
                <li class="ui-widget-content">Item 2</li>
                <li class="ui-widget-content">Item 3</li>
                <li class="ui-widget-content">Item 4</li>
                <div style="clear: both" />
                <li class="ui-widget-content">Item 5</li>
                <li class="ui-widget-content">Item 6</li>
                <li class="ui-widget-content">Item 7</li>
                <li class="ui-widget-content">Item 8</li>
                <div style="clear: both" />
                <li class="ui-widget-content">Item 9</li>
                <li class="ui-widget-content">Item 10</li>
                <li class="ui-widget-content">Item 11</li>
                <li class="ui-widget-content">Item 12</li>
                <div style="clear: both" />
                <li class="ui-widget-content">Item 13</li>
                <li class="ui-widget-content">Item 14</li>
                <li class="ui-widget-content">Item 15</li>
                <li class="ui-widget-content">Item 16</li>
                <div style="clear: both" />
            </ol>
        </div>

        <div id="selectable_conexao">
            Isto daqui é apenas uma &lt;ol&gt; com um monte de &lt;li&gt;'s dentro.
            O código é <code>$("#meu_selectable").selectable();</code>
            <ol id="selectable_exemplo_conexao" style="list-style-type: none;">
                <li class="ui-widget-content">Item 1</li>
                <li class="ui-widget-content">Item 2</li>
                <li class="ui-widget-content">Item 3</li>
                <li class="ui-widget-content">Item 4</li>
                <li class="ui-widget-content">Item 5</li>
            </ol>
        </div>
    </div>

    <style type="text/css" rel="stylesheet">
        #selectable_exemplo .ui-selecting, #selectable_exemplo_float .ui-selecting { background: #FECA40; }
        #selectable_exemplo .ui-selected, #selectable_exemplo_float .ui-selected { background: #F39814; color: white; }
        #selectable_exemplo, #selectable_exemplo_float { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #selectable_exemplo li, #selectable_exemplo_float li { margin: 2px; padding: 3px; }
        #selectable_exemplo_float li { float: left; width: 50px; }
    </style>

    <script type="text/javascript">
        inicializador.selectableInit = function() {
            $("#tab_selectable").tabs();
            $("#selectable_exemplo").selectable();
            $("#selectable_exemplo_float").selectable();
        };
    </script>
</div>